<template>
  <view class="choose-wrapper">
    <u-navbar title="选择车型" :title-bold="false" />
    <div class="choose-content">
      <search @search="onSearch" />
      <div class="choose-list">
        <scroll-view style="height: 100%" scroll-y v-if="dataSource && dataSource.length > 0">
          <view class="" v-for="(item, index) in dataSource" :key="index">
            <view class="choose-item"  @click="onItemClick(item)">{{ item.groupName }}</view>
            <u-line color="#E5E6EBFF" margin="0" />
          </view>
        </scroll-view>
        <empty v-if="dataSource.length == 0 && !requesFetching" />
      </div>
    </div>
  </view>
</template>

<script>
import { getModelGroup } from "@/api/qccx.js";
import search from "../components/search.vue";
import empty from "../components/empty.vue";
import { debounce } from "../utils/index.js";
export default {
  data() {
    return {
      dataSource: [],
      requesFetching: false,
    };
  },
  components: {
    search,
    empty,
  },
  methods: {
    getList(keyword) {
      const param = {
        busType: 2,
        status: 1,
        groupNameLike: keyword,
      }
      this.requesFetching = true
      getModelGroup(param).then((res) => {
        const result = res.result;
        this.dataSource = result;
        this.requesFetching = false;
      }).catch(() => {
        this.requesFetching = false;
      });
    },
    onSearch(val) {
      this.getList(val);
    },
    onItemClick(item) {
      uni.$emit('modelChoose', item)
      uni.navigateBack();
    }
  },
  created() {
    // 生成索引列表
    this.getList();
    // onSearch 函数节流
    this.onSearch = debounce(this.onSearch, 300);
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.choose-wrapper {
  height: 100vh;
  background-color: #f9fafd;
  display: flex;
  flex-direction: column;
  .choose-content {
    flex: 1;
    overflow: hidden;
    padding: 24rpx;
    display: flex;
    flex-direction: column;
    .choose-list {
      flex: 1;
      overflow: hidden;
      margin-top: 24rpx;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 60rpx 0rpx rgba(201, 205, 216, 0.1265);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      padding: 0 32rpx;
      .choose-item {
        padding: 32rpx 0;
        line-height: 44rpx;
        font-size: 28rpx;
        color: #1a1a1a;
      }
    }
  }
}
</style>
